<script setup lang="ts">
import {onMounted} from "vue";
import useRoleStore from "@/store/modules/role.ts";
import {DeleteFilled, DocumentAdd, Edit, FolderAdd, Refresh, Search} from "@element-plus/icons-vue";
import {toDate} from "@/utils";
import {ElMessage} from "element-plus";
const roleStore = useRoleStore();
const onSearchHandler = async function(){
    if(roleStore.keyword.length===0){
        ElMessage.error("请输入搜索的关键词！");
        return;
    }
    await roleStore.getSysRoleListAsync();
}
// 重置
const onResetHandler = async function(){
    roleStore.keyword = "";
    await roleStore.getSysRoleListAsync();
}
onMounted(async ()=>{
    await roleStore.getSysRoleListAsync();
})
defineOptions({
    name:"SysRole"
})
</script>

<template>
    <el-card>
        <el-form @submit.native.prevent @keyup.enter="onSearchHandler" :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input  :style="{width:'180px'}" v-model="roleStore.keyword" placeholder="请输入搜索的关键词" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="onSearchHandler">搜索</el-button>
                <el-button  :icon="Refresh" @click="onResetHandler">重置</el-button>
                <el-button type="success" :icon="FolderAdd" @click="onSearchHandler">添加角色</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-table row-key="_id" border :data="roleStore.roleList"
              style="width: 100%;margin-top:5px;height:calc(100vh - 165px) ">
        <el-table-column prop="name" label="角色名称"  align="center" min-width="150"/>
        <el-table-column prop="sign" label="角色标识"  align="center" min-width="120"/>
        <el-table-column prop="sort" label="排序" align="center" min-width="100"/>
        <el-table-column prop="desc" label="描述" min-width="300"/>
        <el-table-column align="center" label="创建时间" width="180">
            <template #default="scope">
                <el-text>{{ toDate(scope.row.createTime) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间" width="180">
            <template #default="scope">
                <el-text>{{ toDate(scope.row.updateTime) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="200">
            <template #default="scope">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="添加菜单"
                    :enterable="false"
                    placement="top-start"
                >
                    <el-button type="primary" @click="addMenuHandler(scope.row._id)" :icon="DocumentAdd" circle/>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="编辑菜单"
                    :enterable="false"
                    placement="top"
                >
                    <el-button @click="editForm(scope.row)" type="success" :icon="Edit" circle/>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="删除菜单"
                    :enterable="false"
                    placement="top-end"
                >
                    <el-button @click="deleteManuHandler(scope.row._id)" :disabled="scope.row.children && scope.row.children.length>0" type="danger" :icon="DeleteFilled" circle/>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

</template>

<style scoped lang="less">
.el-form-item{
    margin-bottom: 0;
    margin-right: 10px;
}
</style>